<template>
  <!-- 页面主体区 -->
  <el-container class="homeContainer">
    <el-container direction="vertical">
      <el-header>
        <div class="homeHeader">
          <div class="titleDiv">
            <img src="../assets/logo.png" alt="" class="mainLogo" />
            <span class="mainTitle">超然云信巡课系统</span>
          </div>

          <div style="float: left; margin-left: 192px">
            <el-menu
              style="border-bottom: 0px"
              mode="horizontal"
              active-text-color="#201F1F"
              :default-active="routerpath"
              router
            >
              <el-menu-item index="/camera">
                <span>视频广场</span>
              </el-menu-item>
              <el-menu-item index="/stage">
                <span>实时巡课</span>
              </el-menu-item>
              <el-menu-item index="/manage">
                <span>设备管理</span>
              </el-menu-item>
              <el-menu-item index="/system">
                <span>系统状态</span>
              </el-menu-item>
            </el-menu>
          </div>

          <div
            slot="title"
            class="naviTitle"
            style="float: right; padding-right: 16px"
          >
            <!-- <el-button type="primary" @click="logout" style="padding: 8px"
              ><i class="el-icon-config"></i>设置</el-button
            > -->
            <el-button type="primary" @click="logout" style="padding: 8px"
              ><i class="el-icon-logout"></i>退出</el-button
            >
          </div>
        </div>
      </el-header>
      <!-- 右侧内容主体 -->
      <el-main>
        <div style="height: 100%">
          <router-view></router-view>
        </div>
        <!-- 路由占位符 -->
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      nickname: '',
    }
  },
  computed: {
    routerpath() {
      return this.$route.meta.GuidePath
        ? this.$route.meta.JumpPath
        : this.$route.path
    },
  },
  created() {
    this.username = window.sessionStorage.getItem('username')
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      const { data: res } = await this.$http.get('query_user', {
        params: {
          username: this.username,
          token: window.sessionStorage.getItem('token'),
        },
      })
      if (res.code == '1000') {
        this.nickname = res.data.nickname
      }
    },
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
  },
}
</script>
<style lang="less" scoped>
.homeContainer {
  width: 100%;
  height: 100%;
  zoom: 1;
  background-color: #fff;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  position: absolute;
  top: 0;
}
.titleDiv {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  height: 60px;
  float: left;
}
.exitIcon {
  width: 18px;
  height: 18px;
  float: right;
  margin-left: 12px;
  margin-right: 20px;
  cursor: pointer;
}
.mainLogo {
  margin: 0 auto;
  position: relative;
  left: 16px;
  top: 10px;
  width: 136px;
  height: 40px;
  margin-right: 6px;
}
.mainTitle {
  font-size: 18px;
  color: #f3f7fd;
  margin: 0 auto;
  position: relative;
  left: 16px;
  top: -3px;
}
.homeHeader {
  background-color: #0b0a0a !important;
  color: #333 !important;
  height: 60px;
  text-align: right;
}
.el-main {
  background: transparent;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}
/deep/ .el-menu {
  width: 480px;
  height: 60px;
  margin: 0 auto;
  position: relative;
  background: transparent;
}
/deep/ .el-menu-item {
  width: 120px;
  height: 60px;
}
.el-menu-item {
  text-align: center;
  background: #0b0a0a !important;
  color: #878787;
}
.el-menu-item:hover {
  background: #201f1f !important;
  color: #f3f7fd !important;
}
.el-menu-item.is-active {
  background: #201f1f !important;
  color: #f3f7fd !important;
}
.naviTitle {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.el-header /deep/ {
  padding: 0;
  height: 60px !important;
}
/deep/ .el-button {
  width: 100px;
  height: 36px;
  color: #999999;
  font-size: 14px;
  background: #1a1919;
  border: 1px solid #404040;
  border-radius: 3px;
}
.el-button--primary:focus,
.el-button--primary:hover {
  background: #3d3d3d;
  border: 1px solid #717070;
  border-radius: 3px;
}
.el-icon-logout {
  background: url('../assets/exit.png') center no-repeat;
  background-size: cover;
  margin-right: 6px;
}
.el-icon-logout:before {
  content: '\66ff';
  font-size: 16px;
  visibility: hidden;
}
.el-icon-logout {
  font-size: 16px;
}
.el-icon-logout:before {
  content: '\e641';
}
</style>
